<template>
	<view class="pop-order-choose-pay">
		<u-popup ref="store_cart_pop" bgColor="#ffffff" :show="show_pop" mode="bottom" :closeOnClickOverlay="true"
			round="30" @close="handleClose" @open="handleOpen">
			<view class="info-modal-wrap">
				<view class="info-modal-inner">
					<view class="modal-head flex-center">
						<view class="title-box">
							支付方式
						</view>
					</view>

					<view class="modal-ctx">
						<scroll-view scroll-y scroll-with-animation class="scroll-container">
							<view class="pay-wrap">
								<view class="pay-list">
									<view class="pay-item" @click="togglePay('weixin')">
										<view class="icon-box">
											<image src="@/static/payment/type-weixin.png" mode=""></image>
										</view>
										<view class="title">
											微信支付
										</view>
										<view class="check-box">
											<text>

											</text>
											<image v-if="pay_type_value == 'weixin'" src="@/static/common/radio1.png" mode="">
											</image>
											<image v-else src="@/static/common/radio0.png" mode=""></image>
										</view>
									</view>

									<view class="pay-item" @click="togglePay('yue')">
										<view class="icon-box">
											<image src="@/static/payment/type-yue.png" mode=""></image>
										</view>
										<view class="title">
											余额支付(可用:￥{{my_info.money || 0}})
										</view>
										<view class="check-box">
											<text v-if="is_need_zuhe">
												需组合付款
											</text>
											<image v-if="pay_type_value == 'yue'" src="@/static/common/radio1.png" mode=""></image>
											<image v-else src="@/static/common/radio0.png" mode=""></image>
										</view>
									</view>
									
									
									<view class="pay-item" @click="togglePay('yongjin')">
										<view class="icon-box">
											<image src="@/static/payment/yongjin.png" mode=""></image>
										</view>
										<view class="title">
											<!-- 线下支付 -->
											佣金支付(可用:￥{{my_info.commission || 0}})
										</view>
										<view class="check-box">
											<text>
									
											</text>
											<image v-if="pay_type_value == 'yongjin'" src="@/static/payment/radio1.png" mode=""></image>
											<image v-else src="@/static/payment/radio0.png" mode=""></image>
										</view>
									</view>
									
									
									<view class="pay-item" @click="togglePay('xianxia')">
										<view class="icon-box">
											<image src="@/static/payment/type-xianxia.png" mode=""></image>
										</view>
										<view class="title">
											线下支付
										</view>
										<view class="check-box">
											<text>
									
											</text>
											<image v-if="pay_type_value == 'xianxia'" src="@/static/common/radio1.png" mode="">
											</image>
											<image v-else src="@/static/common/radio0.png" mode=""></image>
										</view>
									</view>

								</view>
								
								
								
								
								<view class="wrap-xianxia">
									<view class="box-xianxia"  v-if="pay_type_value == 'xianxia'">
										<view class="info-box">
											<div class="box-title">
												收款对公账户
											</div>
									
											<view class="box-loop-wrap">
												<!-- <view class="tabs-wrap">
													<u-tabs :current="xianxia_account_index" :scrollable="false" :list="xianxia_account_list"
														keyName="title" lineColor="#CB0011" :lineWidth="28" :lineHeight="2" @click="xianxia_tabClick"
														:itemStyle="{height: '50px',fontSize: '28rpx',color:'#B3B9C9'}"
														:activeStyle="{fontWeight: 'bold',color: '#000000' }" :inactiveStyle="{}"></u-tabs>
												</view> -->
									
									
												<view class="box-loop" v-for="(item,index) in xianxia_account_list">
													<view class="box-info">
														<view class="label">
															公司全称
														</view>
														<view class="value" @click="doCopyAccountInfo(item.company)">
															{{item.company}}
															<image src="@/static/common/copy.png" mode=""></image>
														</view>
													</view>
													<view class="box-info">
														<view class="label">
															对公开户行
														</view>
														<view class="value" @click="doCopyAccountInfo(item.bankName)">
															{{item.bankName}}
															<image src="@/static/common/copy.png" mode=""></image>
														</view>
													</view>
													<view class="box-info">
														<view class="label">
															对公账户
														</view>
														<view class="value" @click="doCopyAccountInfo(item.bankAccount)">
															{{item.bankAccount}}
															<image src="@/static/common/copy.png" mode=""></image>
														</view>
													</view>
												</view>
											</view>
									
										</view>
									
										<view class="info-box upload-wrap">
											<div class="box-title">
												上传转账凭证
											</div>
											<view class="upload-box">
												<view class="upload-list">
													<view class="upload-item" v-for="(pic,index) in uploadImages" :key="index"
														@click="doPreview(pic)">
														<view class="remore-box flex-center" @click.stop="doRemove(pic, index)">
															<image class="upload-remove" src="@/static/feedback/remove.png" mode=""></image>
														</view>
														<view class="poster-box">
															<image class="upload-image" :src="pic" mode="aspectFill"></image>
														</view>
													</view>
													<view class="upload-item" @click="doUpload()" v-if="uploadImages.length < 6">
														<image class="upload-icon" src="@/static/payment/type-xianxia-upload.png" mode=""></image>
													</view>
												</view>
											</view>
										</view>
									</view>
								</view>
								
								
							</view>
						</scroll-view>
					</view>

					<view class="modal-foot">
						<view class="footer-wrap ">
							<view class="btns flex-between">
								<view class="btn btn-confirm  flex-center" @click="doConfirmPay()">
									确定
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	import {
		mapState
	} from 'vuex'
	export default {
		components: {

		},
		data() {
			return {
				show_pop: false,
				order_id: '',
				info: {},
				my_info: {},

				//
				order: {},
				pay_type_value: 2,
				valueMap: {
					'yue': {
						value: 'yue',
						title: '余额支付',
					},
					'weixin': {
						value: 'weixin',
						title: '微信支付',
					},
				},
				myInfo: {},
				orderPrice: 0, //待支付订单金额
				my_yue: 0, // 我饿余额



				// 线下转账
				uploadImages: [], //线下凭证上传
				allow_upload_number: 1, //最大上传数量限制
				xianxia_account_list: [],
				xianxia_account_select: {},
			}
		},
		computed: {
			...mapState([
				//
			]),

			is_need_zuhe() {
				return false;
			}
		},
		watch: {

		},
		methods: {
			init(info = {}) {
				this.info = info;
				this.order_id = this.info.id;
				this.show_pop = true;
				this.orderPrice = info.price

				this.query_user();
				this.query_xianxia_account();
			},

			query_user() {
				this.$api({
					url: '/service.php',
					method: 'get',
					data: {
						action: 'users_userInfo',
					},
				}).then(res => {
					if (res.code == 200) {
						this.my_info = res.data;
						this.my_yue = parseFloat(res.data.money) || 0
					}
				})
			},

			query_xianxia_account() {
				this.$api({
					url: '/service.php',
					method: 'get',
					data: {
						action: 'pay_getOfflineBanks',
					},
				}).then(res => {
					if (res.code == 200) {
						let list = res.data;
						list.forEach((v, index) => {
							v.title = '账户' + (index + 1)
						})
						this.xianxia_account_list = list;
						this.xianxia_account_select = this.xianxia_account_list[0] || {}
					}
				})
			},


			togglePay(value) {
				if (value == 'yue') {
					// if(this.my_yue > 0 && my_yue < this.orderPrice) {
					// 	this.$alert('余额不足！可使用组合支付')
					// 	this.pay_type_value = 2;
					// 	return
					// } else 

					if (this.my_yue < this.orderPrice) {
						this.$alert('余额不足！')
						this.pay_type_value = 'weixin';
						return
					}
				}

				this.pay_type_value = value;
			},

			handleClose() {
				this.show_pop = false;
			},
			handleOpen() {},
			doClose() {
				this.show_pop = false;
			},

			doConfirmPay() {
				// this.$emit('confirm', this.pay_type_value)
				// this.show_pop = false;
				if (!this.pay_type_value) {
					this.$alert('请选择支付方式')
					return
				}
				
				if (!this.pay_type_value == 'xianxia') {
					if(!this.uploadImages.length) {
						this.$alert('请上传转账凭证信息')
						return
					}
				}

				this.do_order_pay();
			},

			do_order_pay() {
				if (this.pay_type_value == 'yue') {
					this.pay_use_yue();
				} else if (this.pay_type_value == 'yongjin') {
					this.pay_use_yongjin();
				}else if (this.pay_type_value == 'weixin') {
					this.pay_use_weixin();
				} else if (this.pay_type_value == 'xianxia') {
					this.pay_use_xianxia();
				}
			},



			// 余额支付
			pay_use_yue() {
				this.$api({
					url: '/service.php',
					method: 'get',
					data: {
						action: 'pay_balance',
						orderType: 1,
						orderId: this.order_id,
					},
				}).then((res) => {
					this.hideLoading();
					this.$alert(res)
					if (res.code == 200) {
						this.$emit('confirm', this.order_id)
						this.show_pop = false;
					} else {}
				});
			},


			// 微信支付
			pay_use_weixin() {
				this.showLoading({
					title: '支付信息请求中',
					disClose: true
				})
				this.$api({
					url: '/service.php',
					method: 'get',
					data: {
						action: 'pay_weixin',
						orderId: this.order_id,
						orderType: 1,
					},
				}).then(res => {
					// this.$alert(res)
					let data = res.data;

					if (res.code == 200) {
						uni.requestPayment({
							provider: 'wxpay',
							timeStamp: String(data.timeStamp),
							nonceStr: data.nonceStr,
							package: data.package,
							signType: data.signType,
							paySign: data.paySign,
							success: (res) => {
								console.log('支付成功', res)

								this.toPaySuccess()
							},
							fail: (err) => {
								this.$alert('支付失败');
								setTimeout(() => {
									this.toPayFail();
								}, 1000)
								// console.log('支付失败', err)
							},
							complete: () => {
								this.hideLoading();
							}
						});
					} else {
						this.$alert(res)
					}

					// #ifdef H5
					this.hideLoading();
					// #endif
				})
			},



			// 余额支付
			pay_use_xianxia() {
				this.$api({
					url: '/service.php',
					method: 'get',
					data: {
						action: 'pay_offline',
						orderType: 1,
						orderId: this.order_id,
						bankId: this.xianxia_account_select.id || '',
						remark: this.remark,
						images: this.uploadImages.join(','),
					},
				}).then((res) => {
					this.$alert(res)
					if (res.code == 200) {
						// this.toPaySuccess();
					} else {

					}
					this.toRoute({
						mode: 'reLaunch',
						path: '/order-list'
					})
				});
			},

			//佣金支付
			pay_use_yongjin(){
				this.$api({
					url: '/service.php',
					method: 'get',
					data: {
						action: 'pay_commission',
						orderType: 1,
						orderId: this.order_id,
					},
				}).then((res) => {
					this.hideLoading();
					this.$alert(res)
					if (res.code == 200) {
						this.$emit('confirm', this.order_id)
						this.show_pop = false;
					} else {}
				});
			},


			toPaySuccess() {
				this.toPayResult(1)
			},
			toPayFail() {
				// this.toPayResult(0)
			},
			toPayResult(is_pay = 0) {
				this.toRoute({
					path: '/payment-success',
					query: {
						order_id: this.order_id,
						type: 'order',
						is_pay: is_pay,
					},
					// mode: 'redirectTo'
				})
			},
			
			
			
			// 线下转款上传凭证信息
			
			
			//线下图片上传处理
			doCopyAccountInfo(data) {
				uni.setClipboardData({
					data: `${data}`,
					success: () => {
						console.log('复制')
						this.$alert('已复制')
					}
				})
			},
			// 上传
			doPreview(pic) {
				uni.previewImage({
					urls: [pic],
				});
			},
			doUpload() {
				// #ifdef H5
				this.do_h5_upload();
				// #endif
			
				// #ifndef H5
				this.do_mp_upload();
				// #endif
			},
			
			// H5环境上传图片
			do_h5_upload() {
				let count = this.allow_upload_number - this.uploadImages.length
				uni.chooseImage({
					count: count || 1,
					mediaType: ['image'], // 图片// ['image', 'video']	
					sourceType: ['album', 'camera'], // 从相册选择
					sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图，默认二者都有
					success: (res) => {
						console.warn('选择图片 success', res)
			
						// tempFilePaths  路径列表
						// tempFiles			文件列表
						res.tempFiles.forEach(file => {
							this.$apiUpload({
								url: '/service.php',
								method: 'post',
								data: {
									action: 'index_localUpload',
									img: file.path,
									if_touxiang: 0,
								},
							}).then(res => {
								if (res.code == 200) {
									let pic = res.data;
									this.uploadImages.push(pic)
								}
							});
						})
					}
				});
			},
			
			// 小程序环境上传图片
			do_mp_upload() {
			
				console.log('dianjile111')
				let count = this.allow_upload_number - this.uploadImages.length
				uni.chooseMedia({
					count: count || 1,
					mediaType: ['image'], // 图片// ['image', 'video']	
					sourceType: ['album', 'camera'], // 从相册选择
					sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图，默认二者都有
					success: (res) => {
						console.warn('选择图片 success', res)
			
						// tempFilePaths  路径列表
						// tempFiles			文件列表 【{tempFilePath: '临时路径'}】
						res.tempFiles.forEach(file => {
							this.$apiUpload({
								url: '/service.php',
								method: 'post',
								data: {
									action: 'index_localUpload',
									img: file.tempFilePath,
									// if_touxiang: 0,
								},
							}).then(res => {
								if (res.code == 200) {
									let pic = res.data;
									this.uploadImages.push(pic)
								}
							});
						})
					}
				});
			},
			
			doRemove(pic, index) {
				this.uploadImages.splice(index, 1)
			},
			// 上传

		},
	}
</script>


<style lang="scss" scoped>
	.pop-order-choose-pay {
		// position: relative;
		// z-index: 1000;
	}


	.info-modal-wrap {
		width: 574rpx;
		width: 660rpx;
		width: 100%;
		position: relative;
		text-align: left;
		padding-bottom: 0;
		// padding-bottom: calc(64rpx + constant(safe-area-inset-bottom));
		// padding-bottom: calc(64rpx + env(safe-area-inset-bottom));

		.info-modal-inner {
			border-radius: 16rpx;
			overflow: hidden;
			width: 100%;
			padding: 0 0;
			padding-bottom: 0;
			min-height: 400rpx;
			background: #FFFFFF;
		}
	}



	.modal-head {
		padding: 24rpx 40rpx;
		// border-bottom: 1rpx solid #DDDDDD;
		padding-right: 0;

		.title-box {
			flex: 1;
			overflow: hidden;
			padding-right: 30rpx;
			text-align: center;

			font-family: PingFang SC, PingFang SC;
			font-weight: bold;
			font-size: 32rpx;
			color: #000000;
		}
	}


	.modal-ctx {
		width: 100%;
		background-color: #fff;
		padding: 0 20rpx;
		min-height: 400rpx;
		padding-bottom: 30rpx;
	}


	.scroll-container {
		max-height: calc(100vh - 600rpx);
	}


	.pay-wrap {}

	.footer-wrap {
		box-shadow: 0rpx -8rpx 20rpx 2rpx rgba(0, 0, 0, 0.06);
		padding: 20rpx;

		.safe-fixed-bottom {
			position: relative;
		}

		.btns {
			.btn {
				flex: 1;
				width: 100%;
				height: 80rpx;

				border-radius: 40rpx;
				font-family: PingFang SC, PingFang SC;
				font-weight: 400;
				font-size: 28rpx;
				color: #FFFFFF;

				&.btn-cancel {
					background: #ddd;
					color: #666;
				}

				&.btn-confirm {
					background: #CB0011;
				}


				&+.btn {
					margin-left: 24rpx;
				}
			}
		}
	}




	.pay-list {
		padding: 0 30rpx;
		background: #FFFFFF;

		.pay-item {
			height: 108rpx;
			display: flex;
			justify-content: space-between;
			align-items: center;


			&+.pay-item {
				border-top: 1rpx solid #EAEAEA;
			}

			.icon-box {
				width: 40rpx;
				height: 40rpx;

				image {
					width: 40rpx;
					height: 40rpx;
				}
			}

			.title {
				margin-left: 30rpx;
				flex: 1;
				overflow: hidden;
				font-family: PingFang SC, PingFang SC;
				font-weight: 400;
				font-size: 28rpx;
				color: #000000;
			}

			.check-box {
				display: flex;
				align-items: center;

				text {
					margin-right: 10rpx;
					font-family: PingFang SC, PingFang SC;
					font-weight: 400;
					font-size: 24rpx;
					color: #999999;
				}

				image {
					width: 40rpx;
					height: 40rpx;
				}
			}
		}
	}
	
	
	
	
	
	
	
	
	
	
	
	
	// 线下转款
	
	// 线下转账信息
	.wrap-xianxia {
		padding: 12rpx 20rpx;
		
	}
	.box-xianxia {
		padding: 10rpx 24rpx;
		margin-top: 0rpx;
		border: 1rpx dashed #eee;
	
		.info-box {
			.box-title {
				font-family: PingFang SC, PingFang SC;
				font-weight: bold;
				font-size: 28rpx;
				color: #000000;
			}
	
			.box-info {
				margin-top: 20rpx;
				display: flex;
				justify-content: space-between;
				align-items: center;
	
				.label {
					font-family: PingFang SC, PingFang SC;
					font-weight: bold;
					font-size: 24rpx;
					color: #000000;
				}
	
				.value {
					display: inline-flex;
					align-items: center;
					font-family: PingFang SC, PingFang SC;
					font-weight: 400;
					font-size: 24rpx;
					color: #000000;
	
					image {
						margin-left: 16rpx;
						width: 24rpx;
						height: 24rpx;
					}
				}
			}
		}
	
	
		.upload-wrap {
			margin-top: 32rpx;
	
			.upload-box {
				margin-top: 24rpx;
	
				image {}
			}
		}
	}
	
	
	
	
	// 线下转账凭证
	.upload-list {
		display: flex;
		flex-wrap: wrap;
		justify-content: flex-start;
	
	
		.upload-item {
			margin-bottom: 24rpx;
			margin-right: 16rpx;
			position: relative;
			width: 202rpx;
			height: 198rpx;
			background: #F6FAFD;
			background: #fff;
			border-radius: 8rpx 8rpx 8rpx 8rpx;
	
			&:nth-child(3n) {
				margin-right: 0;
			}
	
			.upload-icon {
				width: 100%;
				height: 100%;
				border-radius: 8rpx 8rpx 8rpx 8rpx;
			}
	
			.poster-box {
				width: 100%;
				height: 100%;
	
				.upload-image {
					width: 100%;
					height: 100%;
					border-radius: 8rpx 8rpx 8rpx 8rpx;
				}
			}
	
	
	
			.remore-box {
				position: absolute;
				z-index: 10;
				right: -20rpx;
				top: -20rpx;
				width: 60rpx;
				height: 60rpx;
	
				.upload-remove {
					width: 32rpx;
					height: 32rpx;
				}
			}
		}
	}
</style>